<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">手机验证</block>
		</cu-custom>
		<view class="forget-bg">
			<view class="forget-card">
				<view class="forget-input forget-margin-b">
					<input type="number" v-model="phone" maxlength="11" placeholder="请输入您的手机号" />
				</view>
				<view class="forget-input forget-margin-b">
					<view class="verify-left">
						<input v-model="code" type="number" placeholder="请输入验证码" />
					</view>
					<view class="verify-right">
						<button class="verify-btn" type="primary" :disabled="codeDisabled" @click="getCode">{{codeText}}</button>
					</view>
				</view>
				<view class="forget-input">
					<input v-model="password" maxlength="16" type="password" placeholder="请输入密码(8-16位,包含数字和字母)" />
				</view>
			</view>
		</view>
		<view class="forget-btn">
			<button class="landing" type="primary" @click="onNext">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				phone: '',
				code: '',
				codeDisabled: false,
				codeText: '获取验证码',
				tempCode: '', //临时验证码
				tempPhone: '', //临时手机号
				password: ''
			}
		},
		onLoad() {
			// console.log("11111111111")
		},
		methods: {
			getCode() {
				if (this.checkPhone(this.phone)) {
					console.log(this.phone)
					//保存当前手机号，用于验证码验证
					this.tempPhone = this.phone
					//倒计时
					this.startCountDown(this)
					var that = this
					//请求获取验证码
					uni.request({
						url: this.$constant.BASEURL + this.$constant.GET_PHONE_CODE,
						method: "POST",
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							phone: this.phone
						},
						success: (res) => {
							console.log(res.data);
							if (res.data.code == 0) {
								that.tempCode = res.data.data
							}
						}
					});
				} else {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none"
					})
				}
			},
			//开始倒计时
			startCountDown(that) {
				//初始化按钮状态,设置成不可点击
				that.codeDisabled = true
				//正式计时
				var currentTime = 60
				that.codeText = currentTime + 's'
				var interval = setInterval(function() {
					currentTime--
					that.codeText = currentTime + 's'
					// console.log(currentTime)
					if (currentTime <= 0) {
						//计时完成后关闭定时器，并重置按钮
						clearInterval(interval)
						that.codeDisabled = false
						that.codeText = "获取验证码"
					}
				}, 1000)
			},
			checkPass(password) {
				return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/.test(password)
			},
			checkPhone(number) {
				return /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/.test(number)
			},
			onNext() {
				console.log("tempCode = "+this.tempCode)
				console.log("tempPhone = " + this.tempPhone)
				console.log("code = "+this.code)
				console.log("phone = " + this.phone)
				
				/** 测试  start **/
				// uni.navigateTo({
				// 	url: 'register'
				// });
				// return
				
				/** end **/
				
				if (!this.checkPhone(this.phone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none"
					})
					return
				}
				if (!this.code.length > 0) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}
				
				if (this.code != this.tempCode) {
					uni.showToast({
						title: "验证码错误",
						icon: "none"
					})
					return
				}

				if (this.phone != this.tempPhone) {
					uni.showToast({
						title: "手机号已经被修改，请重新获取验证码",
						icon: "none"
					})
					return
				}
				
				//检查密码
				if (!this.checkPass(this.password)) {
					uni.showToast({
						title: "密码为8-16位,包含数字和字母",
						icon: "none"
					})
					return
				}
				
				//验证手机号是否已经被注册
				uni.request({
				    url: this.$constant.BASEURL + this.$constant.CHECK_PHONE, 
					method: "POST",
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {
				        username: this.phone
				    },
				    success: (res) => {
						console.log(res.data)
						if(res.data.code == 0){
							uni.redirectTo({
								url: `register?phone=${this.phone}&password=${this.password}`
							});
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none"
							})
						}
				    }
				});
				
			}

		}
	}
</script>

<style>
	.verify-left {
		width: calc(100% - 260upx);
	}

	.verify-right {
		padding-left: 20upx;
	}

	.verify-btn {
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		width: 240upx;
		border-radius: 8upx;
		background: linear-gradient(left, #5599ff, #5599ff);
	}

	.verify-left,
	.verify-right {
		float: left;
	}

	.landing {
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left, #5599ff, #5599ff);
	}

	.forget-btn {
		padding: 10upx 20upx;
		margin-top: 340upx;
	}

	.forget-input input {
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}

	.forget-margin-b {
		margin-bottom: 25upx;
	}

	.forget-input {
		padding: 10upx 20upx;
		overflow: auto;
	}

	.forget-card {
		background: #fff;
		border-radius: 12upx;
		padding: 60upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0, 0, 0, 0.12);
		position: relative;
		margin-top: 120upx;
	}

	.forget-bg {
		height: 260upx;
		padding: 25upx;
		background: linear-gradient(#5599ff, #5599ff);
	}
</style>
